<template>
	<div>
		<!-- 订单列表 -->
		<el-table :data="orderlist" border>
			<el-table-column type="index" label="#"></el-table-column>
			<el-table-column label="买家姓名" prop="user_name"></el-table-column>
			<el-table-column label="购买商品" prop="good_name"></el-table-column>
			<el-table-column label="总价" prop="total_price"></el-table-column>
			<el-table-column label="状态">
				<template v-slot="scope">
					<el-button @click="toPay(scope.row.id)" type="danger" v-if="scope.row.status==0">去付款</el-button>
					<el-button type="success" v-else="">已付款</el-button>
				</template>
			</el-table-column>
			<el-table-column label="地址" prop="order_address"></el-table-column>
			<el-table-column label="操作">
				<!-- 功能按钮 -->
				<template v-slot="scope">
					<el-button type="danger" icon="el-icon-delete" @click="showDeleteDialog(scope.row.id)"></el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="query_info.page"
		 :page-sizes="[1, 2, 5, 10]" :page-size="query_info.page_size" layout="total, sizes, prev, pager, next, jumper"
		 :total="list_count">
		</el-pagination>

		<!-- 删除订单对话框 -->
		<el-dialog title="删除订单" :visible.sync="deleteDialogVisible" width="30%">
			<span>确定删除订单吗？</span>
			<span slot="footer" class="dialog-footer">
				<el-button @click="deleteDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="deleteDialogVisible = false;deleteorder()">确 定</el-button>
			</span>
		</el-dialog>
		</el-card>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				deleteDialogVisible: false,
				orderId: -1,
				query_info: {
					"token": window.localStorage.getItem("token"),
					"page": 1,
					// 这里的page_size的值要与上文中列表中可选值一致
					"page_size": 5,
					"query": ""
				},
				orderlist: [],
				list_count: 0,
				editForm: {
					"order_address": "",
					"total_price": "",
					"status": ""
				}
			}
		},
		created() {
			this.getorderlist();
			// console.log();
		},
		methods: {
			async getorderlist() {
				const {
					data: res
				} = await this.$http.get('orderapi/operation/list/', {
					params: this.query_info
				});
				// console.log(res);
				this.orderlist = res.results;
				// console.log(res.results);
				this.list_count = res.count;
			},
			handleSizeChange(newPageSize) {
				this.query_info.page_size = newPageSize;
				this.getorderlist();
			},
			handleCurrentChange(current_page) {
				this.query_info.page = current_page;
				this.getorderlist();
			},
			showDeleteDialog(id) {
				this.deleteDialogVisible = true;
				this.orderId = id;
			},
			async deleteorder() {
				let url = "orderapi/operation/" + this.orderId + "/?token=" + this.query_info.token;
				const {
					data: res
				} = await this.$http.delete(url);
				if (!res) {
					this.$message.success("删除订单成功");
					this.query_info.page = 1;
					this.getorderlist();
				} else {
					this.$message.error("删除订单失败");
				}
			},
			async toPay(id){
				let url = "payapi/order/pay/?token=" + this.query_info.token;
				let data = new FormData()
				data.append("order_id", id)
				
				const {
					data: res
				} = await this.$http.post(url, data);
				if (res) {
					// console.log(res.payurl)
					window.location.href = res.payurl;
				} else {
					this.$message.error("失败");
				}
			}

		}
	}
</script>

<style lang="less" scoped="scoped">
	.el-breadcrumb {
		font-size: 0.75rem;
		margin-bottom: 0.9375rem;
	}
</style>
